<template>
    <div class="charts">
        <v-chart :option="getOption()" autoresize></v-chart>
    </div>
</template>

<script setup lang="ts">
const getOption = () => {
    return {
        xAxis: {
            type: 'category',
            show: false,
        },
        yAxis: {
            show: false,
        },
        series: {
            type: 'bar',
            colorBy: 'data',
            data: props.data,
            label: {
                show: 'false',
                position: 'insideTop',
                color: 'white',
            },
            AnimationDelay: function (idx) {
                return idx * 100;
            },
        },
        grid: {
            left: 0,
            top: 0,
            right: 0,
            bottom: 0,
            show: true,
            backgroundColor: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                    {
                        offset: 0,
                        color: "#bfa",
                    },
                    {
                        offset: 1,
                        color: "#bbf",
                    },
                ],
                global: false,
            },
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
            },
            position: function (point,params,dom,rect,size) {
                return [point[0], '5%'];
            },
        },
    };
};
let props = defineProps(["data"]);

</script>

<style scoped>
.charts {
    width: 100%;
    height: 100%;
}
</style>